<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedchain QNA Bot</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="w-full bg-gray-100 overflow-hidden">
        <div class="flex flex-col min-h-screen justify-center">
            <div class="w-full mx-auto p-4 space-y-4">
                <div class="text-center space-y-3">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-black">
                        {{bot_name}}
                    </h2>
                </div>
                <div class="flex flex-col mx-auto w-full sm:w-[90%] md:w-[80%] lg:w-[70%] space-y-4">
                    <form id="query-form" method="POST" class="space-y-6">
                        <div class="flex flex-col sm:flex-row justify-center sm:space-x-2 space-y-4 sm:space-y-0">
                            <input id="query" name="query" type="text" required="" placeholder="Enter your query" value="{{query}}"
                                class="block w-full px-5 py-3 text-base text-black placeholder-gray-400 transition duration-500 ease-in-out transform border-2 border-black rounded-lg bg-gray-50 focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300"
                            />
                            <button type="submit"
                                class="flex items-center justify-center w-full sm:w-28 md:w-40 px-10 py-4 text-base font-medium text-center text-white transition duration-300 ease-in-out transform bg-black rounded-lg hover:bg-blue-700 focus:outline-none">
                                Submit
                            </button>
                        </div>
                    </form>
                    <div class="flex flex-col justify-center">
                        <button id="loader" type="button" disabled=""
                            class="hidden inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-2 rounded-lg border border-black bg-black px-3 py-2 text-base font-medium text-white transition hover:bg-black focus:outline-none focus:ring-2 focus:ring-black disabled:pointer-events-none disabled:opacity-75">
                            <svg class="h-4 w-4 animate-spin" viewBox="3 3 18 18">
                                <path class="fill-gray-600"
                                    d="M12 5C8.13401 5 5 8.13401 5 12c0 3.866 3.13401 7 7 7 3.866.0 7-3.134 7-7 0-3.86599-3.134-7-7-7zM3 12c0-4.97056 4.02944-9 9-9 4.9706.0 9 4.02944 9 9 0 4.9706-4.0294 9-9 9-4.97056.0-9-4.0294-9-9z">
                                </path>
                                <path class="fill-blue-100"
                                    d="M16.9497 7.05015c-2.7336-2.73367-7.16578-2.73367-9.89945.0-.39052.39052-1.02369.39052-1.41421.0-.39053-.39053-.39053-1.02369.0-1.41422 3.51472-3.51472 9.21316-3.51472 12.72796.0C18.7545 6.02646 18.7545 6.65962 18.364 7.05015c-.390599999999999.39052-1.0237.39052-1.4143.0z">
                                </path>
                            </svg>
                            <span>Loading...</span>
                        </button>
                        <textarea
                            class="block w-full px-5 py-3 mt-2 text-base text-black placeholder-gray-400 transition duration-500 ease-in-out transform border-2 border-black rounded-lg bg-gray-50 focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 apearance-none autoexpand"
                            id="result" type="text" name="result" placeholder="Result will be displayed here..."
                            spellcheck="false" rows="10">{{result}}</textarea>
                    </div>
                </div>
            </div>
            <footer class="h-full text-right pr-8 pt-12 sm:pt-28">
                <a href="https://embedchain.ai" class="text-indigo-400 text-lg font-semibold">
                    Powered by embedchain
                </a>
            </footer>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const queryForm = document.getElementById("query-form");
            const queryInput = document.getElementById("query");
            const loader = document.getElementById("loader");
            const resultTextarea = document.getElementById("result");

            queryForm.addEventListener("submit", function() {
                loader.classList.remove("hidden");
            });

            if (resultTextarea.value !== "") {
                loader.classList.add("hidden");
            } 

            queryInput.addEventListener("input", function() {
                resultTextarea.value = "";
            });
        });

        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }
    </script>
</body>
</html>